<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Seabird</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" type="image/x-icon" href="style/images/favicon.png" />
<link href="style/css/bootstrap.css" rel="stylesheet">
<link href="style/css/settings.css" rel="stylesheet">
<link href="style/js/google-code-prettify/prettify.css" rel="stylesheet">
<link href="style/js/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" media="all" />
<link href="style/js/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.2" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet">
<link href="style/css/color/green.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="style/type/fontello.css" rel="stylesheet">
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/css/ie8.css" media="all" />
<![endif]-->
<!--[if lt IE 9]>
<script src="style/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header>
  <div class="logo pull-left"> <a href="index.html"><img src="style/images/logo.png" alt="" /></a> </div>
  <ul class="contact-info pull-right">
    <li><i class="icon-mail"></i><a href="mailto:#">first.last@email.com</a></li>
    <li><i class="icon-phone-1"></i>+00 (123) 456 78 90</li>
  </ul>
</header>
<!-- /header -->
<div class="body-wrapper">
  <nav id="menu" class="menu">
    <ul id="tiny">
      <li><a href="index.html"><i class="icon-home icn"></i>Home</a>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="index2.html">Home II</a></li>
          <li><a href="index3.html">Home III</a></li>
          <li><a href="index4.html">Home IV</a></li>
        </ul>
      </li>
      <li class="active"><a href="portfolio.html"><i class="icon-magic icn"></i>Portfolio</a>
        <ul>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="portfolio-post.html">Post with Slider</a></li>
          <li><a href="portfolio-post2.html">Post with Images</a></li>
          <li><a href="portfolio-post3.html">Post with Video</a></li>
        </ul>
      </li>
      <li><a href="about.html"><i class="icon-docs-1 icn"></i>Pages</a>
        <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="page-with-sidebar.html">Page with Sidebar</a></li>
        </ul>
      </li>
      <li><a href="blog.html"><i class="icon-pencil icn"></i>Blog</a>
        <ul>
          <li><a href="blog.html">Grid Blog with Sidebar</a></li>
          <li><a href="blog2.html">Grid Blog without Sidebar</a></li>
          <li><a href="blog3.html">Blog Medium</a></li>
          <li><a href="blog4.html">Blog Large</a></li>
          <li><a href="blog-post.html">Blog Post</a></li>
        </ul>
      </li>
      <li><a href="elements.html"><i class="icon-cog-alt icn"></i>Features</a>
        <ul>
          <li><a href="elements.html">Elements</a></li>
          <li><a href="pricing-table.html">Pricing Table</a></li>
          <li><a href="retina-icons.html">Retina Icons</a></li>
        </ul>
      </li>
      <li><a href="contact.html"><i class="icon-mail icn"></i>Contact</a></li>
    </ul>
  </nav>
  <!-- /.menu -->
  
  <div class="box box-border pull-right">
    <div class="light-wrapper">
      <div class="container inner">
        <div class="page-header">
          <h1 class="page-title pull-left">Portfolio</h1>
          <div class="portfolio-filter btn-group pull-right">
            <button class="btn inverse dropdown-toggle bm0" data-toggle="dropdown" data-hover="dropdown">Filter Portfolio</button>
            <!-- /.btn -->
            <ul class="dropdown-menu filter">
              <li><a class="active" href="#" data-filter="*">All</a></li>
              <li><a href="#" data-filter=".web">Web</a></li>
              <li><a href="#" data-filter=".graphic">Graphic</a></li>
              <li><a href="#" data-filter=".artwork">Artwork</a></li>
              <li><a href="#" data-filter=".video">Video</a></li>
            </ul>
            <!-- /.filter .dropdown-menu --> 
          </div>
          <!-- /.portfolio-filter --> 
        </div>
        <!-- /.page-header --> 
        <div id="portfolio">
          <ul class="items thumbs portfolio row">
            <li class="item thumb span4 graphic">
              <figure class="overlay media-wrapper"><a href="style/images/art/p1.jpg" class="fancybox-media" rel="portfolio"><img src="style/images/art/p1.jpg" alt="" /></a></figure>
              <div class="details">
                <h4 class="post-title"><a href="portfolio-post.html">Nobis Business Card</a></h4>
                <div class="meta">Grapic Design, Corporate</div>
                <p>Morbi leo risus, porta ac consectetur ac. Porta sagittis lacus vel. Fusce dapibus, tellus ac.</p>
              </div>
              <!-- /.details --> 
            </li>
            <!-- /.thumb -->
            <li class="item thumb span4 graphic web">
              <figure class="overlay media-wrapper"><a href="style/images/art/p2.jpg" class="fancybox-media" rel="portfolio"><img src="style/images/art/p2.jpg" alt="" /></a></figure>
              <div class="details">
                <h4 class="post-title"><a href="portfolio-post2.html">Design Creates Culture</a></h4>
                <div class="meta">Grapic Design, Web Design</div>
                <p>Nulla vitae elit libero, a pharetra augue. Donec sed rutrum faucibus dolor auctor laoreet rutrum.</p>
              </div>
              <!-- /.details --> 
            </li>
            <!-- /.thumb -->
            <li class="item thumb span4 web">
              <figure class="overlay media-wrapper"><a href="style/images/art/p3.jpg" class="fancybox-media" rel="portfolio"><img src="style/images/art/p3.jpg" alt="" /></a></figure>
              <div class="details">
                <h4 class="post-title"><a href="portfolio-post3.html">Branding Cover</a></h4>
                <div class="meta">Grapic Design, Branding</div>
                <p>Curabitur blandit tempus porttitor. Donec id elit non. Vivamus sagittis lacus vel augue.</p>
              </div>
              <!-- /.details --> 
            </li>
            <!-- /.thumb -->
            <li class="item thumb span4 graphic">
              <figure class="overlay media-wrapper"><a href="style/images/art/p4.jpg" class="fancybox-media" rel="portfolio"><img src="style/images/art/p4.jpg" alt="" /></a></figure>
              <div class="details">
                <h4 class="post-title"><a href="portfolio-post3.html">Be Curious</a></h4>
                <div class="meta">Grapic Design, Illustration</div>
                <p>Curabitur blandit tempus porttitor. Donec id elit non. Vivamus sagittis lacus vel augue.</p>
              </div>
              <!-- /.details --> 
            </li>
            <!-- /.thumb -->
            <li class="item thumb span4 web">
              <figure class="overlay media-wrapper"><a href="style/images/art/p5.jpg" class="fancybox-media" rel="portfolio"><img src="style/images/art/p5.jpg" alt="" /></a></figure>
              <div class="details">
                <h4 class="post-title"><a href="portfolio-post.html">The Runway</a></h4>
                <div class="meta">Web Design, Fashion</div>
                <p>Morbi leo risus, porta ac consectetur ac. Porta sagittis lacus vel. Fusce dapibus, tellus ac.</p>
              </div>
              <!-- /.details --> 
            </li>
            <!-- /.thumb -->
            <li class="item thumb span4 video">
              <figure class="overlay media-wrapper"><a href="style/images/art/p6.jpg" class="fancybox-media" rel="portfolio"><img src="style/images/art/p6.jpg" alt="" /></a></figure>
              <div class="details">
                <h4 class="post-title"><a href="portfolio-post2.html">Modify Hero Badge</a></h4>
                <div class="meta">Braning, Vintage</div>
                <p>Nulla vitae elit libero, a pharetra augue. Donec sed rutrum faucibus dolor auctor laoreet rutrum.</p>
              </div>
              <!-- /.details --> 
            </li>
            <!-- /.thumb -->
            <li class="item thumb span4 web artwork">
              <figure class="overlay media-wrapper"><a href="style/images/art/p7.jpg" class="fancybox-media" rel="portfolio"><img src="style/images/art/p7.jpg" alt="" /></a></figure>
              <div class="details">
                <h4 class="post-title"><a href="portfolio-post3.html">New Fun Project</a></h4>
                <div class="meta">Illustration, Branding</div>
                <p>Curabitur blandit tempus porttitor. Donec id elit non. Vivamus sagittis lacus vel augue.</p>
              </div>
              <!-- /.details --> 
            </li>
            <!-- /.thumb -->
            <li class="item thumb span4 artwork">
              <figure class="overlay media-wrapper"><a href="style/images/art/p8.jpg" class="fancybox-media" rel="portfolio"><img src="style/images/art/p8.jpg" alt="" /></a></figure>
              <div class="details">
                <h4 class="post-title"><a href="portfolio-post3.html">Go Back To The Gym</a></h4>
                <div class="meta">Grapic Design, artwork</div>
                <p>Curabitur blandit tempus porttitor. Donec id elit non. Vivamus sagittis lacus vel augue.</p>
              </div>
              <!-- /.details --> 
            </li>
            <!-- /.thumb -->
            <li class="item thumb span4 graphic">
              <figure class="overlay media-wrapper"><a href="style/images/art/p9.jpg" class="fancybox-media" rel="portfolio"><img src="style/images/art/p9.jpg" alt="" /></a></figure>
              <div class="details">
                <h4 class="post-title"><a href="portfolio-post.html">Fluid Logo Mark</a></h4>
                <div class="meta">Grapic Design, Corporate</div>
                <p>Morbi leo risus, porta ac consectetur ac. Porta sagittis lacus vel. Fusce dapibus, tellus ac.</p>
              </div>
              <!-- /.details --> 
            </li>
            <!-- /.thumb -->
          </ul>
          <!-- /.thumbs --> 
        </div>
        <!--/#portfolio --> 
        
      </div>
      <!--/.container--> 
    </div>
    <!--/.light-wrapper-->
    
    <footer class="black-wrapper">
      <div class="container inner">
        <div class="row">
          <section class="span4 widget">
            <h3 class="section-title widget-title">Popular Posts</h3>
            <ul class="post-list">
              <li>
                <h6><a href="blog-post.html">Vivamus sagittis lacus vel augue metus</a></h6>
                <em>3th Oct 2012</em> </li>
              <li>
                <h6><a href="blog-post.html">Scelerisque nisl consectetur et</a></h6>
                <em>28th Sep 2012</em> </li>
              <li>
                <h6><a href="blog-post.html">Pellentesque ornare sem lacinia quam</a></h6>
                <em>15th Aug 2012</em> </li>
            </ul>
            <!-- /.post-list --> 
          </section>
          <!-- /.widget -->
          <section class="span4 widget">
            <h3 class="section-title widget-title">Tags</h3>
            <div class="tagcloud"> <a href="#" style="font-size: 9pt;">blogroll</a> <a href="#" style="font-size: 19pt;">daily</a> <a href="#" style="font-size: 9pt;">dialog</a> <a href="#" style="font-size: 9pt;">gallery</a> <a href="#" style="font-size: 10pt;">journal</a> <a href="#" style="font-size: 9pt;">link</a> <a href="#" style="font-size: 12pt;">motion</a> <a href="#" style="font-size: 9pt;">music</a> <a href="#" style="font-size: 20pt;">photo</a> <a href="#" style="font-size: 13pt;">professional</a> <a href="#" style="font-size: 16pt;">quotation</a> <a href="#" style="font-size: 9pt;">show</a> <a href="#" style="font-size: 15pt;">sound</a> <a href="#" style="font-size: 9pt;">tv</a> <a href="#" style="font-size: 9pt;">video</a> <a href="#" style="font-size: 9pt;">gift</a> <a href="#" style="font-size: 19pt;">label</a> <a href="#" style="font-size: 9pt;">christmas</a> <a href="#" style="font-size: 9pt;">holiday</a> <a href="#" style="font-size: 10pt;">fun</a> <a href="#" style="font-size: 9pt;">recipes</a> <a href="#" style="font-size: 12pt;">concert</a> <a href="#" style="font-size: 9pt;">drinks</a> <a href="#" style="font-size: 20pt;">apps</a> <a href="#" style="font-size: 13pt;">iphone</a> <a href="#" style="font-size: 16pt;">ipad</a> <a href="#" style="font-size: 9pt;">develop</a> <a href="#" style="font-size: 15pt;">marketing</a> <a href="#" style="font-size: 9pt;">strategy</a> <a href="#" style="font-size: 13pt;">food</a> <a href="#" style="font-size: 12pt;">typography</a> <a href="#" style="font-size: 9pt;">mobile</a> <a href="#" style="font-size: 15pt;">envato</a> <a href="#" style="font-size: 9pt;">icon</a> <a href="#" style="font-size: 9pt;">coda</a> <a href="#" style="font-size: 20pt;">jquery</a> <a href="#" style="font-size: 9pt;">cms</a> </div>
          </section>
          <!-- /.widget -->
          <section class="span4 widget">
            <h3 class="section-title widget-title">Get In Touch</h3>
            <p>Fusce dapibus, tellus commodo, tortor mauris condimentum utellus fermentum, porta sem malesuada magna. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur.</p>
            <div class="divide10"></div>
            <i class="icon-location contact"></i> Moonshine St. 14/05 Light City, Jupiter <br />
            <i class="icon-phone contact"></i>+00 (123) 456 78 90 <br />
            <i class="icon-mail contact"></i> <a href="first.last@email.com">first.last@email.com</a> </section>
          <!-- /.widget --> 
        </div>
        <!-- /.row --> 
      </div>
      <!-- .container --> 
    </footer>
    <!-- /footer -->
    
    <div class="subfooter">
      <div class="container inner">
        <p class="pull-left">© 2013 Seabird. All rights reserved. Theme by <a href="http://elemisfreebies.com">elemis</a>.</p>
        <ul class="social pull-right">
          <li><a href="#"><i class="icon-s-rss"></i></a></li>
          <li><a href="#"><i class="icon-s-twitter"></i></a></li>
          <li><a href="#"><i class="icon-s-facebook"></i></a></li>
          <li><a href="#"><i class="icon-s-dribbble"></i></a></li>
          <li><a href="#"><i class="icon-s-pinterest"></i></a></li>
        </ul>
      </div>
      <!-- /.container --> 
    </div>
    <!-- /.subfooter --> 
  </div>
  <!--/.box--> 
</div>
<!--/.body-wrapper--> 
<script src="style/js/jquery.js"></script> 
<script src="style/js/bootstrap.min.js"></script> 
<script src="style/js/twitter-bootstrap-hover-dropdown.min.js"></script> 
<script src="style/js/ddsmoothmenu.js"></script> 
<script src="style/js/jquery.themepunch.plugins.min.js"></script> 
<script src="style/js/jquery.themepunch.revolution.min.js"></script> 
<script src="style/js/jquery.themepunch.showbizpro.min.js"></script> 
<script src="style/js/jquery.fancybox.pack.js"></script> 
<script src="style/js/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script> 
<script src="style/js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.0"></script> 
<script src="style/js/jquery.meanmenu.2.0.min.js"></script> 
<script src="style/js/jquery.fitvids.js"></script> 
<script src="style/js/jquery.slickforms.js"></script> 
<script src="style/js/jquery.isotope.min.js"></script> 
<script src="style/js/google-code-prettify/prettify.js"></script> 
<script src="style/js/jquery.easytabs.min.js"></script> 
<script src="style/js/jquery.hoverdir.min.js"></script> 
<script src="style/js/scripts.js"></script>
</body>
</html>